<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>

    <link rel="shortcut icon" th:href="@{/favicon.ico}"> 
    <link th:href="@{css/bootstrap.min.css?v=3.3.6}" rel="stylesheet">
    <link th:href="@{/css/font-awesome.css?v=4.4.0}" rel="stylesheet">
    <link th:href="@{/css/animate.css}" rel="stylesheet">
    <link th:href="@{/css/style.css?v=4.1.0}" rel="stylesheet">
    <link th:href="@{/css/plugins/validate/bootstrapValidator.min.css}" rel="stylesheet">

    <script th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
    <script th:src="@{/js/bootstrap.min.js?v=3.3.6}"></script>
    <script th:src="@{/js/plugins/validate/bootstrapValidator.min.js}"></script>
    <script th:inline="javascript" type="text/javascript">
        if(window.top !== window.self){
            window.top.location = window.location;
        }
        $(window).resize(function(){ 
            $(".mydiv").css({ 
                position: "absolute", 
                left: ($(window).width() - $(".mydiv").outerWidth())/2,
                top: ($(window).height() - $(".mydiv").outerHeight())/4
            });
        });
        $(function(){ 
            $(window).resize(); 
        });
    </script>
</head>

<body class="gray-bg">
    <div class="middle-box text-center loginscreen mydiv">
        <div class="main">
            <div>
                <h3 class="logo-name">统一权限管理平台</h3>
            </div>
            <h4 style="color: red;" th:if="${tip != ''}" th:text="${tip}"></h4>
            <form class="m-t" role="form" th:action="@{/login}" th:method="post">
                <div class="form-group">
                    <input type="text" name="userName" class="form-control" placeholder="用户名">
                </div>
                <div class="form-group">
                    <input type="password" name="passWord" class="form-control" placeholder="密码">
                </div>
                <div class="form-group" th:if="${kaptchaOpen}" style="float: left;">
                    <div class="col-sm-8" style="padding-left: 0px; padding-right: 0px;">
                        <input class="form-control" type="text" name="kaptcha" placeholder="验证码">
                    </div>
                    <div class="col-sm-4" style="padding-left: 0px; padding-right: 0px;">
                        <img src="/kaptcha" id="kaptcha" width="100%" height="100%"/>
                    </div>
                </div>
                <div class="form-group" style="float: left;">
                    <div class="checkbox" style="text-align: left">
                        <label>
                            <input type="checkbox" name="remember" style="margin-top: 2px;">记住我
                        </label>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary block full-width m-b">登 录</button>
            </form>
        </div>
    </div>
    <script th:inline="javascript" type="text/javascript">
        $(function () {
            var fields = {
                userName: {
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        }
                    }
                },
                passWord: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        }
                    }
                },
                kaptcha: {
                    validators: {
                        notEmpty: {
                            message: '验证码不能为空'
                        }
                    }
                }
            };
            $('form').bootstrapValidator({
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: fields,
                live: 'enabled',
                message: '该字段不能为空'
            });
            $("#kaptcha").on('click', function () {
                $("#kaptcha").attr('src', '/kaptcha?' + Math.floor(Math.random() * 100)).fadeIn();
            });
        });
    </script>
</body>
</html>
